import { useEffect } from "react";
import BackgroundImg from '../../../assets/loveNest/loveNest_home_img.jpg'
import manAvatar from '../../../assets/loveNest/man_avatar.jpg'
import womanAvatar from '../../../assets/loveNest/woman_avatar.jpg'
import messageImg from '../../../assets/loveNest/message.png'
import localtionImg from '../../../assets/loveNest/location.png'
import mindImg from '../../../assets/loveNest/纪念日.png'
import bigYiMaImg from '../../../assets/loveNest/大姨妈.png'

import {FloatingPanel, Grid} from "antd-mobile";

interface CardType {
    img: any,
    title: string
}

const Home = () => {

    const cards: CardType[] = [
        {
            img: messageImg,
            title: '日记'
        },
        {
            img: localtionImg,
            title: '位置'
        },
        {
            img: mindImg,
            title: '纪念日'
        },
        {
            img: bigYiMaImg,
            title: '大姨妈'
        }
    ]
    const anchors = [100, window.innerHeight * 0.4, window.innerHeight * 0.8]

    useEffect(() => {
        console.log('页面加载成功！');
    }, []);

    return (
        <>
            <div className={'h-screen'}
                 style={{ backgroundImage: `url(${BackgroundImg})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>

                {/*卡片1*/}
                <div className={'w-full h-48 pl-4 pr-4 pt-10'}>
                    <div className={'h-full w-full rounded-2xl backdrop-blur-3xl flex justify-center'}>
                        <div>
                            <div className={'flex mt-2 justify-between'}>
                                <img src={manAvatar} className={'w-12 h-12 rounded-3xl'} alt={'男生头像'}/>
                                <img src={womanAvatar} className={'w-12 h-12 rounded-3xl'} alt={'女生头像'}/>
                            </div>
                            <div className={'text-white text-center pt-5'}>
                                <span className={'text-sm'}>在一起</span>
                                <span className={'text-4xl ml-2'}>385</span>
                                <span className={'text-sm ml-2'}>天</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className={'w-full h-24 pl-4 pr-4 pt-20'}>
                    <div className={'h-full w-full'}>
                        <Grid columns={4} gap={8}>
                            {cards.map(card => {
                                return (
                                    <>
                                        <Grid.Item>
                                            <div className={'w-16 h-24 bg-red-100 rounded-2xl flex justify-center'} style={{flexDirection: "column"}}>
                                                <div>
                                                    <div className={'flex justify-center'}>
                                                        <img src={card.img} className={'w-8 h-8'} alt={''}/>
                                                    </div>
                                                    <div className={'text-center text-gray-500 pt-2'}>{card.title}</div>
                                                </div>
                                            </div>
                                        </Grid.Item>
                                    </>
                                )
                            })}
                        </Grid>
                    </div>
                </div>
            </div>
        </>
    );
}

export default Home;
